<div class="content">
    <div id="example_title">
        <h1>Top &amp; Bottom HTML</h1>
        You can add top and/or bottom HTML that will always stay there. You can create a search control or status bar.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="sidebar" style="height: 300px; width: 200px;"></div>

<!--CODE-->
<script type="module">
import { w2sidebar } from '__W2UI_PATH__'

let sidebar = new w2sidebar({
    box: '#sidebar',
    name: 'sidebar',
    topHTML: '<div style="background-color: #eee; padding: 10px 5px; border-bottom: 1px solid silver">Some HTML</div>',
    bottomHTML: '<div style="background-color: #eee; padding: 10px 5px; border-top: 1px solid silver">Some HTML</div>',
    nodes: [
        { id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
            nodes: [
                { id: 'level-1-1', text: 'Level 1.1', icon: 'fa fa-home' },
                { id: 'level-1-2', text: 'Level 1.2', icon: 'fa fa-coffee' },
                { id: 'level-1-3', text: 'Level 1.3', icon: 'fa fa-comment-o' }
            ]
        },
        { id: 'level-2', text: 'Level 2', img: 'icon-folder', group: true,
            nodes: [
                { id: 'level-2-1', text: 'Level 2.1', icon: 'fa fa-star-o' },
                { id: 'level-2-2', text: 'Level 2.2', icon: 'fa fa-star-o' },
                { id: 'level-2-3', text: 'Level 2.3', icon: 'fa fa-star-o' }
          ]
        },
        { id: 'level-3', text: 'Level 3', img: 'icon-folder', group: true,
            nodes: [
                { id: 'level-3-1', text: 'Level 3.1', icon: 'fa fa-star-o' },
                { id: 'level-3-2', text: 'Level 3.2', icon: 'fa fa-star-o' },
                { id: 'level-3-3', text: 'Level 3.3', icon: 'fa fa-star-o' }
            ]
        }
    ]
})
</script>
